<template>
  <div class="icon">
    <a-card hoverable style="border:0;cursor: pointer">
      <div style="text-align: center" @click="loginMethod(1)">
        <icon-music/>
        <p>账号登录</p>
      </div>
    </a-card>
    <a-card hoverable style="border:0;cursor: pointer" @click="loginMethod(2)">
      <div style="text-align: center">
        <icon-qrcode/>
        <p>扫码登录</p>
      </div>
    </a-card>
    <a-card hoverable style="border:0;cursor: pointer" @click="handleClick">
      <div style="text-align: center">
        <icon-wechat/>
        <p>微信登录</p>
      </div>
    </a-card>
    <a-card hoverable style="border:0;cursor: pointer" @click="loginMethod(4)">
      <div style="text-align: center">
        <icon-weibo-circle-fill/>
        <p>邮箱登录</p>
      </div>
    </a-card>
    <!--    <a-card  hoverable style="border:0;cursor: pointer;background-color:rgba(201,205,212,0.2);border-radius: 10px" @click="loginMethod(1)">-->
    <!--      <div style="text-align: center">-->
    <!--        <icon-exclamation-circle-fill />-->
    <!--        <p>账号注册</p>-->
    <!--      </div>-->
    <!--    </a-card>-->
  </div>
</template>

<script setup>
//获取当前组件实例
// import { getCurrentInstance } from 'vue'
//
// const { proxy } = getCurrentInstance()
import {toast} from "../../../uilti/tool.js";

const emit = defineEmits(['dataList'])

const loginMethod = (e) => {
  emit('dataList', e)
}
const handleClick = () => {
  toast('此功能暂时无法开放', 'error',).then((res) => {

  })
}
</script>

<style scoped>
.icon {
  display: flex;
  justify-content: space-around;
}
</style>